<template lang="html">
  <div class="app">
    <mu-linear-progress v-if="this.$store.state.loading"></mu-linear-progress>

    <mu-appbar :title="this.$store.state.title" color="primary">
      <mu-button @click="open = !open" icon slot="left">
        <mu-icon value="menu"></mu-icon>
      </mu-button>
    </mu-appbar>

    <mu-drawer :open.sync="open" :docked="false">
      <mu-appbar class="tc" :title="this.$store.state.username" color="primary" />
      <mu-list toggle-nested>

        <mu-list-item @click="routeTo('主页', 'Index')" button>
          <mu-list-item-title>主页</mu-list-item-title>
        </mu-list-item>

        <mu-list-item button nested :open="false">
          <mu-list-item-title>用户管理</mu-list-item-title>
          <mu-list-item-action>
            <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
          </mu-list-item-action>
          <mu-list-item button slot="nested" @click="routeTo('用户列表', 'UserList')">
            <mu-list-item-title>用户列表</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('新建用户', 'UserNew')">
            <mu-list-item-title>新建用户</mu-list-item-title>
          </mu-list-item>
        </mu-list-item>

        <mu-list-item button nested :open="false">
          <mu-list-item-title>功能区</mu-list-item-title>
          <mu-list-item-action>
            <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
          </mu-list-item-action>
          <mu-list-item button slot="nested" @click="routeTo('背景图', 'Img', 'banner')">
            <mu-list-item-title>背景图</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('荣誉资质', 'Img', 'honor')">
            <mu-list-item-title>荣誉资质</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('发展历程', 'DevelopHistory')">
            <mu-list-item-title>发展历程</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('公司新闻', 'ArticleList', 'news')">
            <mu-list-item-title>公司新闻</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('公司公告', 'ArticleList', 'notice')">
            <mu-list-item-title>公司公告</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('活动预告', 'ArticleList', 'activity')">
            <mu-list-item-title>活动预告</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('招商引资', 'ArticleList', 'attract')">
            <mu-list-item-title>招商引资</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('文化娱乐', 'ArticleList', 'culture')">
            <mu-list-item-title>文化娱乐</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('咨询中心', 'ArticleList', 'consultation')">
            <mu-list-item-title>咨询中心</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('服务中心', 'ArticleList', 'service')">
            <mu-list-item-title>服务中心</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('投资新闻', 'ArticleList', 'investment')">
            <mu-list-item-title>投资新闻</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button slot="nested" @click="routeTo('投资政策', 'ArticleList', 'policy')">
            <mu-list-item-title>投资政策</mu-list-item-title>
          </mu-list-item>
        </mu-list-item>

        <mu-list-item button nested :open="false">
          <mu-list-item-title>招聘相关</mu-list-item-title>
          <mu-list-item-action>
            <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
          </mu-list-item-action>

          <mu-list-item button slot="nested" @click="routeTo('职位列表', 'RecruitPosition')">
            <mu-list-item-title>职位列表</mu-list-item-title>
          </mu-list-item>

          <mu-list-item button slot="nested" @click="routeTo('招聘列表', 'RecruitList')">
            <mu-list-item-title>招聘列表</mu-list-item-title>
          </mu-list-item>

          <mu-list-item button slot="nested" @click="routeTo('申请列表', 'RecruitApply')">
            <mu-list-item-title>申请列表</mu-list-item-title>
          </mu-list-item>
        </mu-list-item>

        <mu-list-item button @click="routeTo('留言列表', 'Advices')">
          <mu-list-item-title>留言列表</mu-list-item-title>
        </mu-list-item>

        <mu-list-item button nested :open="false">
          <mu-list-item-title>设置</mu-list-item-title>
          <mu-list-item-action>
            <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
          </mu-list-item-action>

          <mu-list-item button slot="nested" @click="routeTo('管理员设置', 'Setting', 'admin')">
            <mu-list-item-title>管理员设置(待定)</mu-list-item-title>
          </mu-list-item>

          <mu-list-item button slot="nested" @click="routeTo('SEO 设置', 'Setting', 'seo')">
            <mu-list-item-title>SEO 设置</mu-list-item-title>
          </mu-list-item>

          <mu-list-item button slot="nested" @click="routeTo('世贸简介', 'Setting', 'introduction')">
            <mu-list-item-title>世贸简介</mu-list-item-title>
          </mu-list-item>

          <mu-list-item button slot="nested" @click="routeTo('区位交通', 'Setting', 'traffic')">
            <mu-list-item-title>区位交通</mu-list-item-title>
          </mu-list-item>

          <mu-list-item button slot="nested" @click="routeTo('关于我们', 'Setting', 'aboutUs')">
            <mu-list-item-title>关于我们</mu-list-item-title>
          </mu-list-item>

          <mu-list-item button slot="nested" @click="routeTo('底部信息', 'Setting', 'footInfo')">
            <mu-list-item-title>底部信息</mu-list-item-title>
          </mu-list-item>

        </mu-list-item>

        <mu-list-item button href="/admin/out">
          <mu-list-item-title>安全退出</mu-list-item-title>
        </mu-list-item>

      </mu-list>
    </mu-drawer>

    <RouteView/>

  </div>
</template>

<script>
export default {
  data() {
    return {
      open: false,
    }
  },
  mounted() {
    this.$store.commit('loading', false)
  },
  methods: {
    routeTo(title, name, type=null) {
      this.open = false

      this.$router.push({
        name,
        params: {
          type,
        },
      })

      this.$store.commit('loading', true)
      this.$store.commit('title', title)
      setTimeout(() => {
        this.$store.commit('loading', false)
      }, 1000);
    },

  },
}
</script>

<style lang="css">
.tc {
  text-align: center;
}
</style>
